import React, {Component} from 'react';
import './App.css';
import Immutable from 'immutable'
import WordAdder from "./WordAdder";

class ListOfWords extends React.PureComponent {
  render() {
    return <div>{this.props.words.join(',')}</div>;
  }
}
class ImmWordAdder extends Component {

  constructor(props) {
    super(props);
    this.state = {
      words: Immutable.List(['marklar'])
    };
    this.handleClickWithImmutable = this.handleClickWithImmutable.bind(this);
  }
  handleClickWithImmutable() {
    // 这段内容将会导致代码不会按照你预期的结果运行
    const words = this.state.words;
    this.setState({words: words.insert(words.size, 'Immutable')});
  }
  render() {
    return (
        <>
          <div className={'App'}>
            <button onClick={this.handleClickWithImmutable}>使用Immutable</button>
            <ListOfWords words={this.state.words}/>
          </div>
        </>
    );
  }
}

export default ImmWordAdder;
